<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="/css/public.css" media="all" />
<link rel="stylesheet" href="/layui_ext/dtree/dtree.css" media="all" />
<link rel="stylesheet" href="/layui_ext/dtree/font/dtreefont.css" media="all" />

</head>
<body class="childrenBody">
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<!-- 查询条件开始 -->
<blockquote class="layui-elem-quote">
	<form action="" method="post" id="searchFrm" lay-filter="searchFrm" class="layui-form layui-form-pane">
		<div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">所属部门</label>
		      <div class="layui-input-inline">
		      	 <input type="hidden" name="deptid" id="search_deptid">
		         <ul id="search_deptTree" class="dtree" data-id="0"></ul>
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">用户名称</label>
		      <div class="layui-input-inline">
		        <input type="text" name="name" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">用户地址</label>
		      <div class="layui-input-inline">
		      <input type="text" name="address" autocomplete="off" class="layui-input">
		      </div>
		    </div>
			<div class="layui-inline" style="text-align: center;">
				<button type="button" class="layui-btn" lay-submit="" lay-filter="doSearch"><span class="layui-icon layui-icon-search"></span>查询</button>
				<button type="reset" onclick="javascript:document.getElementById('search_deptid').value=''" class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
			</div>
		  </div>
	</form>
</blockquote>
<!-- 查询条件结束-->


<!-- 数据表格开始 -->
<div>
	<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
	<div id="userToolBar" style="display: none;">
		<button type="button" lay-event="add" class="layui-btn layui-btn-sm"><span class="layui-icon layui-icon-add-1"></span>添加用户</button>
	</div>
	
	<div id="userRowBar" style="display: none;">
		<button type="button" lay-event="update" class="layui-btn layui-btn-sm"><span class="layui-icon layui-icon-edit"></span>编辑</button>
		<button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-btn-danger"><span class="layui-icon layui-icon-delete"></span>删除</button>
		<button type="button" lay-event="resetPwd" class="layui-btn layui-btn-sm layui-btn-warm"><span class="layui-icon layui-icon-tips"></span>重置密码</button>
		<button type="button" lay-event="selectRole" class="layui-btn layui-btn-sm"><span class="layui-icon layui-icon-auz"></span>分配角色</button>
	</div>
</div>

<!-- 数据表格结束 -->

<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 5px" id="addOrUpdateDiv">
	<form action="" method="post" class="layui-form layui-form-pane" id="dataFrm" lay-filter="dataFrm">
		<div class="layui-form-item">
			<div class="layui-inline">
			    <label class="layui-form-label">所属部门</label>
			    <div class="layui-input-inline">
			    	<input type="hidden" name="deptid" id="deptid">
			    	<ul id="deptTree" class="dtree" data-id="0"></ul>
			    </div>
		    </div>
		    <div class="layui-inline">
			   <label class="layui-form-label">排序码</label>
		    	<div class="layui-input-inline">
		      		<input type="hidden" name="id">
		      		<input type="text" name="ordernum" id="ordernum" lay-verify="required|number"  autocomplete="off" placeholder="请输入排序码[>0]" class="layui-input">
		   		</div>
		    </div>
	 	</div>
	 	<div class="layui-form-item">
			<div class="layui-inline">
			    <label class="layui-form-label">领导部门</label>
			    <div class="layui-input-inline">
			    	<ul id="leaderdeptTree" class="dtree" data-id="0"></ul>
			    </div>
		    </div>
		    <div class="layui-inline">
			   <label class="layui-form-label">直属领导</label>
		    	<div class="layui-input-inline">
					<select name="mgr" id="mgr">
						<option value="0">请选择直属领导</option>
					</select>		      		
		   		</div>
		    </div>
	 	</div>
	 	<div class="layui-form-item">
			<div class="layui-inline">
			    <label class="layui-form-label">用户姓名</label>
			    <div class="layui-input-inline">
		      		<input type="text" name="name" id="username" lay-verify="required" autocomplete="off" placeholder="请输入用户姓名" class="layui-input">
			    </div>
		    </div>
		    <div class="layui-inline">
			   <label class="layui-form-label">登陆名称</label>
		    	<div class="layui-input-inline">
		      		<input type="text" name="loginname" id="loginname" lay-verify="required"  autocomplete="off" placeholder="请输入登陆名称" class="layui-input">
		   		</div>
		    </div>
	 	</div>
 	   <div class="layui-form-item">
		    <label class="layui-form-label">用户地址</label>
		    <div class="layui-input-block">
		      		<input type="text" name="address"  autocomplete="off" placeholder="请输入用户用地址" class="layui-input">
		    </div>
 	   </div>
		<div class="layui-form-item">
		    <label class="layui-form-label">用户备注</label>
		    <div class="layui-input-block">
		    	 <textarea class="layui-textarea" name="remark" id="content"></textarea>
		    </div>
 	   </div>
	  <div class="layui-form-item">
	    <div class="layui-inline">
	      <label class="layui-form-label">用户性别</label>
	      <div class="layui-input-inline">
	        <input type="radio" name="sex" value="1" title="男" checked="">
	        <input type="radio" name="sex" value="0" title="女" >
	      </div>
	    </div>
	    <div class="layui-inline">
	      <label class="layui-form-label">是否可用</label>
	      <div class="layui-input-inline">
	        <input type="radio" name="available" value="1" title="可用" checked="">
	        <input type="radio" name="available" value="0" title="不可用" >
	      </div>
	    </div>
	  </div>
<!-- 	   <div class="layui-form-item">-->
<!--		    <div class="layui-input-block" style="text-align: center;">-->
<!--		      	<button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit" ><span class="layui-icon layui-icon-add-1"></span>提交</button>-->
<!--      			<button type="reset" onclick="javascript:document.getElementById('deptid').value=''" class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>-->
<!--		     </div>-->
<!-- 	   </div>-->
	</form>
</div>
<!-- 添加和修改的弹出层结束 -->


<!-- 用户分配角色弹出层  开始 -->
<div style="display: none;padding: 5px" id="selectUserRoleDiv">
	<table class="layui-hide" id="roleTable" lay-filter="roleTable"></table>
</div>


<!-- 用户分配角色弹出层  结束 -->


<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript">
var tableIns;
layui.extend({
    dtree: '/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
  }).use(['jquery','form','table','layer','dtree'],function(){
		var $=layui.jquery;
		var form=layui.form;
		var table=layui.table;
		var layer=layui.layer;
		var dtree=layui.dtree;
		var index = layui.layer.msg('查询中，请稍候...', {icon: 16, time: false, shade: 0.6, shadeClose: false});
		//加载 数据
		 tableIns=table.render({
			 elem: '#userTable'
		    ,url:'/sysUser/list'
		    ,toolbar: '#userToolBar' //开启头部工具栏，并为其绑定左侧模板
		    ,title: '部门数据表'
		    ,height:'full-120'
			,limit : 20
		    ,page: true
		    ,cols: [ [
		      {field:'id', title:'ID',align:'center',width:'80'}
		      ,{field:'name', title:'用户姓名',align:'center',width:'100'}
		      ,{field:'loginname', title:'登陆名称',align:'center',width:'100'}
		      ,{field:'sex', title:'性别',align:'center',width:'80',templet:function(d){
		    	  return d.sex==1?'<font color=blue>男</font>':'<font color=red>女</font>';
		      }}
		      ,{field:'depeName', title:'部门名称',align:'center',width:'120'}
		      ,{field:'mgrName', title:'直属领导',align:'center',width:'100'}
		      ,{field:'address', title:'用户地址',align:'center',width:'150'}
		      ,{field:'remark', title:'用户备注',align:'center',width:'150'}
		      ,{field:'hiredate', title:'入职时间',align:'center',width:'180'}
		      ,{field:'available', title:'是否可用',align:'center',width:'100',templet:function(d){
		    	  return d.available==1?'<font color=blue>可用</font>':'<font color=red>不可用</font>';
		      }}
		      ,{field:'ordernum', title:'排序码',align:'center',width:'100'}
		      ,{field:'imgpath', title:'用户头像',align:'center',width:'200'}
		      ,{fixed: 'right', title:'操作', toolbar: '#userRowBar',align:'center',width:'400'}
		    ] ]
		    ,done: function(res, curr, count){
				 layui.layer.close(index);
			 	//处理删除某一页最后一条数据的BUG
		        if(res.data.length==0&&curr!=1){
		        	tableIns.reload({
		        		page:{
		        			curr:(curr-1)
		        		}
		        	});
		        }
		      }
		});
		
		//模糊查询
		form.on("submit(doSearch)",function(data){
			tableIns.reload({
				where:data.field,
				page:{
					curr:1
				}
			});
			return false;
		});
		
		//监听头工具条的事件
		table.on("toolbar(userTable)",function(obj){
			 var layEvent = obj.event, data = obj.data;
			 if(layEvent === 'add'){
				 commonOpenWindowsAddAndUpdate(data);
			  }
		});
		
		//监听行工具条的事件
		table.on("tool(userTable)",function(obj){
			 var data = obj.data; //获得当前行数据
			 switch(obj.event){
			    case 'update':
					commonOpenWindowsAddAndUpdate(data);
			    break;
			    case 'delete':
			   		deleteUser(data);
			    break;
			    case 'resetPwd':
			    	resetPwd(data);
			    break;
			    case 'selectRole':
			    	selectRole(data);
			    break;
			  };
		});
		
		var mainIndex;
		var url = '/sysUser/userSaveOrUpdate';

		// 添加编辑公共弹窗
		function commonOpenWindowsAddAndUpdate(data) {
			mainIndex = layer.open({
				type: 1
				, title: data == null ? '添加用户' : '编辑用户'
				, content: $('#addOrUpdateDiv')
				, btn: ['保存', '取消']
				, area: ['670px', '460px']
				, btnAlign: 'c'
				, shade: 0.8
				, success: function (layero) {
					// 点击打开时候下拉树是关闭状态
					$("div[dtree-id][dtree-select]").removeClass("layui-form-selected");
					$("div[dtree-id][dtree-card]").removeClass("dtree-select-show layui-anim layui-anim-upbit");
					// 重置表单内容
					document.getElementById("dataFrm").reset();
					//刷新下拉树
					$("#deptid").val("");
					if (data == null) {
						deptTree.reload();
						leaderdeptTree.reload();
						//初始化排序码
						$.get("/sysUser/loadUserMaxOrderNum", function (res) {
							if(res.error){
								$("#ordernum").val(res.value);
							}else{
								layer.msg("查询顺序码失败，请联系管理员！");
								return false;
							}
							var html="<option value='0'>请选择直属领导</option>";
							$("#mgr").html(html);
							form.render("select");
						})
					} else {
						//装载新的数据
						form.val("dataFrm", data);
						//选中之前所属部门  nodeId=data.deptid;
						dtree.dataInit("deptTree", data.deptid);
						// 指定下拉树的默认显示值 （v2.5.5新增）
						dtree.selectVal("deptTree");

						// 选中领导部门
						var leaderid=data.mgr;
						// 根据当前用户的领导id查询所对应的领导部门id
						$.get("/sysUser/loadUserById",{id:leaderid},function(res){
							dtree.dataInit("leaderdeptTree", res.datadeptid);
							dtree.selectVal("leaderdeptTree");
							loadUsersByDeptId(res.datadeptid);
						})
					}
				}, yes: function (index, layero) { // 点击保存按钮触发
					var requestData = $("#dataFrm").serializeObject();
					// alert(JSON.stringify(requestData));
					if(data != null){
						requestData.id = data.id;
					}
					// alert(requestData.pid);
					if(requestData.deptid == null || requestData.deptid == ""){
						layer.msg("所属部门不能为空", {icon: 2});
						return false;
					}
					if(requestData.name == null || requestData.name == ""){
						layer.msg("权限名称不能为空", {icon: 2});
						return false;
					}
					if(requestData.loginname == null || requestData.loginname == ""){
						layer.msg("权限名称不能为空", {icon: 2});
						return false;
					}
					$.post(url, requestData, function (result) {
						if (result.code != 0) {
							layer.msg("服务器请求失败！");
							return false;
						} else {
							layer.msg('保存成功', {icon: 1});
							//不刷新页面 留在当前
							tableIns.reload();
						}
						layer.close(mainIndex);
					})
				}
				, btn2: function (index, layero) {
					document.getElementById("dataFrm").reset();
					layer.close(index);
				}, cancel: function (index, layero) {
					document.getElementById("dataFrm").reset();
					layer.close(index);
				}
			})
		}


		//删除
		function deleteUser(data){
			layer.confirm('你确定要删除【'+data.name+'】这条用户吗?', {icon: 3, title:'提示'}, function(index){
				$.post("/sysUser/deleteUser",{id:data.id},function(res){
					if (res.code != 0) {
						layer.msg("服务器请求失败！");
						return false;
					} else {
						layer.msg('保存成功', {icon: 1});
						//不刷新页面 留在当前
						tableIns.reload();
					}
				})	
			   layer.close(index);
			});
		}
		
		
		//重置密码
		function resetPwd(data){
			layer.confirm('你确定要重置【'+data.name+'】这个用户密码吗?', {icon: 3, title:'提示'}, function(index){
				$.post("/sysUser/resetPwd",{id:data.id},function(res){
					if (res.code != 0) {
						layer.msg("服务器请求失败！");
						return false;
					} else {
						layer.msg('重置密码成功', {icon: 1});
					}
				})
			   layer.close(index);
			});
		}
		
		//初始化查询条件下拉树
		var search_deptTree=dtree.renderSelect({
			  elem: "#search_deptTree",
			  width: "100%", // 可以在这里指定树的宽度来填满div
			  dataStyle: "layuiStyle",  //使用layui风格的数据格式
		      dataFormat: "list",  //配置data的风格为list
		      response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
		      url: "/dept/loadDeptLeftDtreeJson" // 使用url加载（可与data加载同时存在）
			});
		//监听点击的方法
		dtree.on("node(search_deptTree)" ,function(obj){
			$("#search_deptid").val(obj.param.nodeId);
			 console.log(obj.param.nodeId); // 点击当前节点传递的参数
		});
		
		//初始化添加弹出层所属部门的下拉列表
		var deptTree=dtree.renderSelect({
			  elem: "#deptTree",
			  width: "100%", // 可以在这里指定树的宽度来填满div
			  dataStyle: "layuiStyle",  //使用layui风格的数据格式
		      dataFormat: "list",  //配置data的风格为list
		      response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
		      url: "/dept/loadDeptLeftDtreeJson" // 使用url加载（可与data加载同时存在）
			});
		//监听点击的方法
		dtree.on("node(deptTree)" ,function(obj){
			$("#deptid").val(obj.param.nodeId);
			 console.log(obj.param.nodeId); // 点击当前节点传递的参数
		});
		
		//初始化添加弹出层领导部门的下拉列表
		var leaderdeptTree = dtree.renderSelect({
			elem: "#leaderdeptTree",
			width: "100%", // 可以在这里指定树的宽度来填满div
			dataStyle: "layuiStyle",  //使用layui风格的数据格式
			dataFormat: "list",  //配置data的风格为list
			response: {message: "msg", statusCode: 0},  //修改response中返回数据的定义
			url: "/dept/loadDeptLeftDtreeJson" // 使用url加载（可与data加载同时存在）
		});
		//监听点击领导部门的方法
		dtree.on("node(leaderdeptTree)" ,function(obj){
			var deptid=obj.param.nodeId;
			loadUsersByDeptId(deptid)
		});

	    //根据部门ID查询当前部门下面的领导列表
		function loadUsersByDeptId(deptid){
			$.get("/sysUser/loadUsersByDeptId",{deptid:deptid},function(res){
				var html="<option value='0'>请选择直属领导</option>";
				$.each(res.data,function(index,item){
					html+="<option value='"+item.id+"'>"+item.name+"</option>";
				});
				$("#mgr").html(html);
				//重新渲染
				form.render("select");
			});
		}
		

		//监听用户名的失去焦点事件
		$("#username").on("blur",function(){
			var username=$(this).val();
			$.get("/sysUser/changeChineseToPinyin",{username:username},function(res){
				$("#loginname").val(res.value);
			})
		});
		
		
		//打开分配角色的弹出层
		function selectRole(data){
			mainIndex=layer.open({
				type:1,
				content:$("#selectUserRoleDiv"),
				area:['800px','600px'],
				title:'分配【'+data.name+'】的角色',
				btn: ['<span class=layui-icon>&#xe605;确认分配</span>', '<span class=layui-icon>&#x1006;关闭窗口</span>'],
				btnAlign: 'c',
				success:function(){
					//初始化角色列表
					table.render({
						elem: '#roleTable'
						,url:'/sysUser/initRoleByUserId'
						,where:{
							uid:data.id
						}
						,cols: [ [
							{type:'checkbox',align:'center'}
							,{field:'id', title:'ID',align:'center'}
							,{field:'name', title:'角色名称',align:'center'}
							,{field:'remark', title:'角色备注',align:'center'}
						] ]
					});
				},
				yes: function(index, layero){
			    	var checkStatus = table.checkStatus('roleTable');
					var requestData = [];
			    	$.each(checkStatus.data,function(index,item){
						jsonData = {
							"uid" : data.id,
							"rids" : item.id
						}
						requestData.push(jsonData);
			    	});
					$.ajax({
						type: 'post',
						url: '/sysUser/insertBatchUidAndRid',
						contentType: "application/json",
						data: JSON.stringify(requestData),
						dataType: "json",
						success: function (res) {
							if (res.code != 0) {
								layer.msg("服务器请求失败！");
								return false;
							} else {
								layer.msg('角色分配成功', {icon: 1});
							}
							layer.close(mainIndex);
						}
					});
			    },
			    btn2: function(index, layero){
			    //return false 开启该代码可禁止点击该按钮关闭
			    }
			});
		}
	});
</script>

</body>
</html>